<template>
  <page-wrap >
    <template v-slot:extension>
      <div class="booklist-header">
        <z-search
          placeholder="请输入卷名称/卷码"
          @query="onQuery"
          @update:model-value="onUpdateVal"
        ></z-search>
      </div>
    </template>
    <div class="booklist-container">
      <div class="booklist-container-main">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="loadData"
          :immediate-check="false"
          offset="100"
        >
          <div class="booklist-main-item" v-for="(v, k) in list" :key="k">
            <div class="item-main">
              <div class="item-main-table">
                {{ v.roomName }}
              </div>
              <ul class="item-main-center">
                <li class="main-center-li">
                  <!-- <div class="li-left">
                    <span class="li-left-title">人数：</span
                    ><span class="li-left-value">{{ v.peopleNumber }}人</span>
                  </div> -->
                  <div class="li-right">
                    <span class="li-right-title">支付日期：</span
                    ><span class="li-right-value"
                      >{{ dayjs(v.payTime).format('YYYY-MM-DD') }}
                      {{ dayjs(v.payTime).format('HH:mm') }}</span
                    >
                  </div>
                </li>
                <li class="main-center-li">
                  <div class="li-left">
                    <span class="li-left-title">卷名称：</span
                    ><span class="li-left-value">{{v.ticketName}}</span>
                  </div>
                </li>
                <li class="main-center-li">
                  <div class="li-left">
                    <span class="li-left-title">卷号：</span
                    ><span class="li-left-value">{{ v.ticketCode }}</span>
                  </div>
                </li>
              </ul>
              <div class="item-main-low">
                <span class="low-note-title">台单号：</span
                ><span class="low-note-value">{{ v.consumeCode }}</span>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </page-wrap>
</template>
<script setup>
import dayjs from 'dayjs'
import Api from '@/api'
import { transformArrayProps } from '@/lib/util.js'
import { transformWorkTime } from '@/utils/chenhao'
import useConfigStore from '@/store/config'
import { showToast } from 'vant'
import useAppStore from '@/store/app'
const appStore = useAppStore()
const router = useRouter()

// 头部配置
const headerProps = {
  operation: [
    {
      type: 'text',
      click () {
        console.log('跳转历史记录')
        router.push('/book/history')
      }
    }
  ]
}

// 预订列表
const list = ref([])
const loading = ref(false)
const finished = ref(false)

const startTime = ref(transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[0])
const endTime = ref(transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[1])

//表单
const postForm = reactive({
        "operDate":[startTime.value,endTime.value],
        "pageSize":15,"pageIndex":1,
        "code":"","mobile":"","name":"",
        "roomCode":"","roomName":"",
        "payType":"010","payMoneyMin":"",
        "payMoneyMax":"",
        "payStartTime":startTime.value,
        "payEndTime":endTime.value
})


// 查询参数
const onQuery = val => {
  postForm.tickeNameorCode = val
  loadData(true)
}

// 搜索
const searchTimer = ref(null)
const onUpdateVal = val => {
  clearTimeout(unref(searchTimer))
  searchTimer.value = setTimeout(() => {
    postForm.tickeNameorCode = val
    loadData(true)
  }, 500)
}

// 加载
const loadData = async function (refresh = false) {
  if (refresh === true) {
    finished.value = false
    postForm.pageIndex = 1
    list.value = []
  }
  loading.value = true
  const resp = await Api.Common.PcObjProcess.Do({
    functionName: 'GetOrderPayRecord',
    contentData: postForm
  })
  const nowList = resp.result
  if (refresh === true) {
    if (nowList.length !== postForm.pageSize) {
      finished.value = true
    }
  }
  Array.prototype.push.apply(list.value, nowList)
  console.log(nowList,'获取核销卷列表')
  if (nowList.length > 0) {
    postForm.pageIndex++
  } else {
    finished.value = true
  }
  loading.value = false
}

// 初始化
const onInit = async () => {
  loadData(true)
}
onInit()
</script>
<style scoped lang="scss">
.booklist-header {
  // padding-bottom: 10px;
}
.booklist-container {
  padding: 0 12px 60px;

  .booklist-container-main {
  }

  .booklist-container-footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 12px 20px;

    .booklist-footer-btn {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .booklist-footer-icon {
      width: 18px;
      height: 18px;
      margin-right: 8px;
    }
  }

  .booklist-total {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 10px;
    .select-item {
      width: 100px;
      position: relative;
      border: 1px solid #999999;
      border-radius: 4px;
      line-height: 14px;
      padding: 8px 0px 8px 11px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
      .select-item-icon {
        position: absolute;
        right: 12px;
        top: 13px;
        width: 11px;
        height: 6px;
        background-image: url('@/assets/svg/common/v_triangle_bottom_white.svg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100%;
      }
    }
    .highlight {
      color: #ffaa00;
    }
  }
}
.booklist-main-item {
  margin-bottom: 10px;
  background: #28282e;
  border-radius: 8px;

  .item-header {
    display: flex;
    justify-content: space-between;
    // align-items: center;
    padding: 15px 12px;
    border-bottom: 1px solid #383840;

    .item-header-big {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 18px;
    }

    .item-header-left {
      flex: 1;
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
      line-height: 13px;
      display: flex;
      align-items: flex-end;
      padding-bottom: 2px;
      padding-left: 6px;
    }

    .item-header-right {
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 500;
      // color: #ffaa00;
      color: #999999;
      line-height: 13px;
      display: flex;
      align-items: center;
    }
  }

  .item-main {
    padding: 12px 24px;

    .item-main-top {
      display: flex;
      align-items: center;
      padding-bottom: 20px;

      .main-top-title {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 18px;
      }

      .main-top-value {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #cccccc;
        line-height: 13px;
      }
    }
    .item-main-table {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 24px;
      color: #ffffff;
      line-height: 24px;
      padding-bottom: 20px;
    }
    .item-main-center {
      .main-center-li {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 12px;

        .li-left {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 14px;

          .li-left-title {
            color: #cccccc;
          }

          .li-left-value {
            color: #ffffff;
          }
        }

        .li-right {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 14px;

          .li-right-title {
            color: #cccccc;
          }

          .li-right-value {
            color: #ffffff;
          }
        }
      }
    }

    .item-main-low {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
      line-height: 14px;

      .low-note-title {
        color: #cccccc;
      }

      .low-note-value {
        color: #ffffff;
        word-wrap: break-word;
      }
    }
  }

  .item-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px;

    .item-footer-button {
      width: 80px;
      background: #5c5c66;
      padding: 8px 0;
      text-align: center;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 14px;
      margin-right: 10px;

      &.highlight {
        background: linear-gradient(0deg, #cca67a, #fff4d9);
        color: #260c04;
      }
    }
    .item-footer-btn {
      width: 80px;
      padding: 8px 0;
      border-radius: 4px;
      font-size: 14px;
      padding: 8px 0;
      line-height: 14px;
    }
  }
}

.popup-cancel {
  padding: 12px 20px 20px 20px;

  .cancelPre-main {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #505059;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 16px;

    .cancelPre-main-left {
      color: #cccccc;
      padding: 14px 0 17px 0px;
    }

    .cancelPre-main-right {
      color: #cccccc;
      margin-left: 12px;
      overflow: hidden;
      position: relative;
      padding: 14px 17px 17px 0;

      .cancelPre-right-icon {
        width: 10px;
        height: 100%;
        position: absolute;
        right: 0px;
        top: 0px;
        background-image: url('@/assets/svg/confirm/v_confirm-triangle.svg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 10px 6px;
      }
    }
  }
  // 取消预订的备注居右
  :deep(.van-field__control) {
    text-align: right;
    color: #cccccc;
  }

  // 取消预订的备注外边距
  :deep(.van-cell) {
    width: auto;
  }

  // 取消预订备注背景
  :deep(.van-field) {
    background: #45454d;
    border: none;
    padding: 17px 0px 17px 0px;
    border-bottom: 1px solid #505059;
  }

  :deep(.van-field__label) {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #cccccc;
    line-height: 16px;
  }

  :deep(.van-cell:after) {
    border-bottom: 0;
  }
}
</style>
